<template>
  <!-- 推理应用-->
  <div v-show="visiable" class="drawer-box-wrapper left-box">
    <div class="taskCase_container" style="margin-bottom: 10px;">
      <h2>推理应用</h2>
    </div>

    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
        ref="formInlineRef"
      >
        <el-form-item label="EXCEL文件路径：" prop="demand">
          <el-input
            v-model="formInline.demand"
            readonly
            placeholder="请选择文件"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <form id="fileForm">
            <input
              type="file"
              ref="fileUpload"
              name="file"
              accept=".xls, .xlsx"
              style="display: none"
              @change="uploadFileChange"
            />
            <el-button type="primary" @click="selectWjButton">浏览</el-button>
            <el-button
              type="primary"
              @click="jxExcelFile"
              :disabled="formInline.demand === ''"
              >解析文件</el-button
            >
          </form>
        </el-form-item>

        <el-form-item style="float: right;">
          <el-button size="small" type="primary" @click="displayCoordinates"
            >显示坐标</el-button
          >
          <el-button size="small" type="primary" @click="OpenAddModal"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table stripe :data="jxInputData" height="42vh">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="目标编号" prop="mbbh" show-overflow-tooltip />
      <el-table-column label="经度" prop="pointJd" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="纬度" prop="pointWd" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="operation" @click="handleRemove(scope.row, scope.$index)"
            >删除</span
          >
        </template>
      </el-table-column>
    </el-table>

    <el-form
      :label-position="labelPosition"
      :model="formData"
      size="small"
      ref="ruleForm"
      :rules="rules"
      label-width="120px"
      style="margin-top: 10px;"
      :disabled="isDisabled"
    >
      <div class="flex">
        <el-form-item label="需求名称：" class="item-width" prop="xqmc">
          <el-input v-model="formData.xqmc" maxlength="30" v-max-length-tip="30" v-no-space placeholder="请输入需求名称" />
        </el-form-item>

        <el-form-item label="任务类型：" class="item-width" prop="rwlx">
          <el-select
            clearable
            v-model="formData.rwlx"
            placeholder="请选择任务类型"
          >
            <el-option
              v-for="(item, index) in missionTypeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标形态：" class="item-width" prop="mbxt">
          <el-select
            clearable
            v-model="formData.mbxt"
            placeholder="请选择目标动态"
          >
            <el-option
              v-for="(item, index) in targetShapeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item
          label="气象条件："
          class="item-width"
          placeholder="请选择气象条件"
          prop="qxtj"
        >
          <el-select clearable v-model="formData.qxtj">
            <el-option
              v-for="(item, index) in weatherConditionOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="攻击因素：" class="item-width" prop="gjys">
          <el-select v-model="formData.gjys">
            <el-option
              v-for="item in whetherOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否合作目标："
          class="item-width"
          prop="sfhzmb"
          style="width: 50%"
        >
          <el-select v-model="formData.sfhzmb" style="width: 100%">
            <el-option
              v-for="item in whetherOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex">

        <el-form-item label="需求开始时间" prop="xqkssj" class="item-width" style="width: 33.4%;">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
            v-model="formData.xqkssj"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="需求结束时间" prop="xqjssj" class="item-width" style="width: 33.4%;">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
            v-model="formData.xqjssj"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </div>

      <el-form-item label="" class="item-width">
        <el-button size="small" type="primary" @click="handleDecision"
          >知识图谱推理</el-button
        >
      </el-form-item>

      <div class="flex">
        <el-form-item label="载荷类型：" class="item-width" prop="zhlx">
          <el-input
            readonly
            v-no-space
            v-max-length-tip="30"
            maxlength="30"
            v-model="formData.zhlx"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作模式：" class="item-width" prop="gzms">
          <el-input readonly v-model="formData.gzms"></el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="分辨率(m)：" prop="fbl" class="item-width">
          <el-input readonly v-model="formData.fbl" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="优先级：" class="item-width" prop="yxj">
          <el-input
            readonly
            v-no-space
            v-max-length-tip="30"
            maxlength="30"
            v-model="formData.yxj"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>

    <div class="text-align-center">
      <el-button
        size="small"
        type="primary"
        @click="programevaluation('ruleForm')"
        >确定</el-button
      >
    </div>

    <el-dialog title="网格编号" :visible.sync="dialogVisible1" append-to-body>
      <div class="text-align-right m-b-10">
        <el-button
          size="small"
          type="primary"
          @click="addGrid"
          v-show="!isDisabled"
          >添加</el-button
        >
      </div>
      <el-table stripe :data="formData.wgbh" height="45vh">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="网格编号" prop="wgbh" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.wgbh"
              maxlength="30"
              v-max-length-tip="30"
              v-no-space
              clerable
              :disabled="isDisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip v-show="isDisabled">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleRemoveGrid(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span class="dialog-footer" slot="footer">
        <el-button type="primary" @click="dialogVisible1 = false"
          >确定</el-button
        >
        <el-button @click="dialogVisible1 = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="卫星列表" :visible.sync="dialogVisible2" append-to-body>
      <div class="text-align-right m-b-10" v-show="!isDisabled">
        <el-button size="small" type="primary" @click="addSatellite"
          >添加</el-button
        >
      </div>
      <el-table stripe :data="formData.wxlb" height="45vh">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="卫星名称" prop="wxlb" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.wxlb"
              maxlength="30"
              v-max-length-tip="30"
              v-no-space
              clerable
              :disabled="isDisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          show-overflow-tooltip
          v-show="!isDisabled"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleRemoveSatellite(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span class="dialog-footer" slot="footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确定</el-button
        >
        <el-button @click="dialogVisible2 = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog append-to-body title="目标录入" :visible.sync="enterVisible">
      <el-form
        inline
        :model="enterForm"
        :rules="enterRules"
        ref="enterForm"
        label-width="100px"
      >
        <el-form-item label="目标编号" prop="mbbh">
          <el-input v-model="enterForm.mbbh" />
        </el-form-item>
        <el-form-item label="经度" prop="pointJd">
          <el-input v-model="enterForm.pointJd" />
        </el-form-item>
        <el-form-item label="纬度" prop="pointWd">
          <el-input v-model="enterForm.pointWd" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addXq('enterForm')">确定</el-button>
        <el-button @click="cancel('enterForm')">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script src="./left.js"></script>

<style src="../index.scss" lang="scss"></style>
